@extends('/admin/Layout/layout')
@section('title','商品列表')
@section('content')
<div id="page-wrapper" style="min-height: 298px;">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">商品列表</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    模糊查询
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div class="dataTable_wrapper">
                        <div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                        	<form action="" method='get' >
                        	<div class="row">
                        		<div class="col-sm-6">
                        			<div class="dataTables_length" id="dataTables-example_length">
                        				<label>显示&nbsp; 
                        				<select name="num" aria-controls="dataTables-example" class="form-control input-sm">
                        					<option  @if($num==5) selected @endif  value="5">5</option>
                                            <option  @if($num==10) selected @endif  value="10">10</option>
                                            <option  @if($num==25) selected @endif  value="25">25</option>
                                            <option  @if($num==50) selected @endif  value="50">50</option>
                                            <option  @if($num==100) selected @endif  value="100">100</option>
                        				</select>&nbsp; 条</label>
                        			</div>
                        		</div>
                        		<div class="col-sm-6">
	                        		<div id="dataTables-example_filter" class="dataTables_filter">
	                        		<label>
	                        			<span >搜索&nbsp;&nbsp;</span><input class="form-control input-sm" placeholder="" name='likes' value="{{$likes}}" aria-controls="dataTables-example" type="search">
	                        		</label>
	                        		<button class='btn btn-info'>查询</button>
	                        		</div>
	                        	</div>
	                        </div>
	                        </form>
	                    <div class="row">
	                      <div class="col-sm-12">
	                        <table class="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info">
                            <thead>
                            	<tr role="row">
                            		<th style='text-align:center;'>商品图片</th>
                            		<th style='text-align:center;'>商品ID</th>
                                    <th style='text-align:center;width:250px;'>商品名称</th>
                            		<th style='text-align:center;'>所属分类</th>
                            		<th style='text-align:center;'>价格</th>
                            		<th style='text-align:center;'>库存</th>
                            		<th style='text-align:center;'>销量</th>
                                    <th style='text-align:center;'>状态</th>
                                    <th style='text-align:center;'>添加时间</th>
                                    <th style='text-align:center;'>商品详情</th>
                            		<th style='text-align:center;'>操作</th>
                            	</tr>
                            </thead>
                            <tbody>
                            @foreach($goods as $k=>$v )
                            <tr class="gradeA odd" role="row">
                            	<td class="center" style='text-align:center;'>
                                    @if(!$v->gpic == null )
                                    <img src="{{asset($v->gpic)}}" width='50px' height="50px">
                                    @endif
                                </td>
                                <td class="center id" >{{$v->gid}}</td>
                                <td class="center">{{$v->gname}}</td>
                                <td class="center">{{$v->xname}}</td>
                                <td class="center">{{$v->price}}</td>
                                <td class="center">{{$v->cnt}}</td>
                                <td class="center">{{$v->scnt}}</td>
                                <td class="center" id='stat'>{{$arr[$v->status]}}</td>
                                <td class="center" style='text-align:center;'>{{date('Y-m-d',$v->ctime)}}</td>
                                <td class="center"><button class="btn btn-success btn-outline btn-sm detail_btn" >详情</button></td>
                                <td class="center" >
                                    @if($v->status == 2 | $v->status == 0 )
                                    <button class="btn btn-info btn-outline btn-sm status_btn shang_btn"  >上架</button>
                                    @else
                                    <button class="btn btn-info btn-outline btn-sm status_btn xia_btn"  >下架</button>
                                    @endif
                                    <button class="btn btn-danger btn-outline btn-sm delete_btn"  >删除</button> 
									<a href="{{asset('/admin/goods/edit?id='.$v->gid)}}"><div class="btn btn-warning btn-outline btn-sm edit_btn" >修改</div></a>&nbsp;&nbsp; &nbsp;&nbsp;  
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                      </div>
                    </div>
                    <div class="row">
                    	<div class="col-sm-6">
                    		<div class="dataTables_info" id="dataTables-example_info" role="status" aria-live="polite">
                    			{!! $goods->appends($list)->render() !!}
                    		</div>
                    	</div>
                    	<div class="col-sm-6">
                    		<div class="dataTables_paginate paging_simple_numbers" id="dataTables-example_paginate">
                    			
                    		</div>
                    	</div>
                   	</div>
                   	</div>
                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
    </div>
</div>
@endsection
@section('js')
    <style type="text/css">
        .c1{position:fixed;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:1001;}
        .detail{display:none;z-index:1003;}
        .inputstyle{
            width: 144px;height: 200px;
            cursor: pointer; font-size: 30px;
            outline: medium none;
            filter:alpha(opacity=0);
            -moz-opacity:0;opacity:0;
            position: absolute;left:0px;top:0px;
        }
        .div1{height: 200px;width: 144px;float:left;margin-right:5px;display:block;}
        .div2{
        text-align:center;line-height:200px;
        font-size:50px;color:#BBBBBB;font-weight:500;
        width:144px;height:200px;
        position:absolute;left:0px;top:0px;
        }
        .pic{width:144px;height:200px;}
        .xxoo{width:144px;height:225px;float:left;margin-right:5px;position:relative;display:none;}
        .delt{display:block;cursor:pointer;position:absolute;left:120px;top:0px;margin:5px;}
    </style>
    <span id='cover'></span>
    <div  class='detail' style="width:800px;margin:0;padding:0;background-color:rgba(255,255,255,0.8);border-radius:10px;">
        <span id='dele' class='fa fa-times-circle' style='cursor:pointer;z-index:1100;float:right;margin-right:15px;margin-top:15px;'>退出</span>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-10">
                    <h1 class="page-header" style='text-align:center;'>商品详情</h1>
                </div>
                <div class="col-lg-2">
                    <a href="" class='btn btn-success btn-outline pinglun' style='margin:40px 0px;'>商品评论</a>
                </div>
            </div>
        <!-- 块1 -->
            <div id="morris-line-chart">
                <div class="col-lg-4" >
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            商品主图片
                        </div>
                        <div class="panel-body">
                            <img src="" style='width:150px;height:200px;' class='zhutu  ' alt="">
                        </div>
                    </div>
                </div>
                <div class="well well-lg col-lg-8">
                    <h4>商品详细信息</h4>
                        <div style='float:left;margin:5px 0px;'>商品名称：<input type="text" disabled name='gname' class='form1'>&nbsp;&nbsp;</div>
                        <div style='float:left;margin:5px 0px;'>商品折扣：<input disabled type="text" name='dcont' class='form2'>&nbsp;&nbsp;</div>
                        <div style='float:left;margin:5px 0px;'>商品品牌：<input type="text" name='gbrand' class='form3'>&nbsp;&nbsp;</div>
                        <div style='float:left;margin:5px 0px;'>折扣价格：<input disabled type="text" name='zkprice' class='form4'>&nbsp;&nbsp;</div>
                        <div style='float:left;margin:5px 0px;'>货&nbsp;源&nbsp;地&nbsp;&nbsp;:&nbsp;&nbsp;<input type="text" name='gaddr' class='form5'>&nbsp;&nbsp;</div>
                        <div style='float:left;margin:5px 0px;'>适用性别：<input type="text" name='gsex' class='form6'>&nbsp;&nbsp;</div>
                        <div style='float:left;margin:5px 0px;'>适用季节：<input type="text" name='gseason' class='form7'>&nbsp;&nbsp;</div>
                        <div style='float:left;margin:5px 0px;'>适用年龄：<input type="text" name='gage' class='form8'>&nbsp;&nbsp;</div>
                        <input type="hidden" class='form9' >
                        <input type="button" class='btn btn-primary btn-updates' value='提交'>
                        <input type="reset" class='btn btn-warning' value='重置'>
                </div>
            </div>
        <!-- 块2 -->
            <div id="morris-line-chart">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <b>商品描述：</b>
                        </div>
                        <div class="panel-body">
                        
                        <p class='miaoshu'></p>
                        
                        </div>
                    </div>
                </div>
            </div>
        <!-- 块3 -->
            <div id="morris-line-chart">
                <div class="col-lg-12">
                    <form id="img_form" method="post" action="{{asset('/admin/goods/addimg')}}" enctype="multipart/form-data">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <b>图片颜色选择：</b>
                            <input type="submit" class='btn btn-primary' value='添加'><span style='color:#ddd;font-size:12px;float:right;cursor:pointer;' title='最多上传4张图片，上传图片与选择颜色数量必须一致，必须选择图片与颜色'>添加规则</span>
                            <span style='float:right;color:#ddd;font-size:12px;'>建议:&emsp;一次添加一种颜色 &emsp;&emsp;&emsp;&emsp;</span>
                        </div>
                        <div class="panel-body div0">
                            <div style='height:25px;' class='colors'>
                                <input type="checkbox" name='color[]' class='' value='白色'>&nbsp;&nbsp;白色
                                <input type="checkbox" name='color[]' value='红色'>&nbsp;&nbsp;红色
                                <input type="checkbox" name='color[]' value='黄色'>&nbsp;&nbsp;黄色
                                <input type="checkbox" name='color[]' value='粉色'>&nbsp;&nbsp;粉色
                                <input type="checkbox" name='color[]' value='蓝色'>&nbsp;&nbsp;蓝色
                                <input type="checkbox" name='color[]' value='紫色'>&nbsp;&nbsp;紫色
                                <input type="checkbox" name='color[]' value='黑色'>&nbsp;&nbsp;黑色
                                <input type="checkbox" name='color[]' value='琥珀色'>&nbsp;&nbsp;琥珀色
                                <input type="checkbox" name='color[]' value='紫罗兰色'>&nbsp;&nbsp;紫罗兰色
                            </div>

                            <div class=' xxoo'><span class='fa fa-times-circle delt' style='display:none;' id='del0'></span><img src='' title='1' class='pic' alt='' /></div>
                            <div class=' xxoo'><span class='fa fa-times-circle delt' style='display:none;' id='del1'></span><img src='' class='pic' alt='' /></div>
                            <div class=' xxoo'><span class='fa fa-times-circle delt' style='display:none;' id='del2'></span><img src='' class='pic' alt='' /></div>
                            <div class=' xxoo'><span class='fa fa-times-circle delt' style='display:none;' id='del3'></span><img src='' class='pic' alt='' /></div>
                            <div class=' xxoo'><span class='fa fa-times-circle delt' style='display:none;' id='del4'></span><img src='' class='pic' alt='' /></div>
                            <div class=' xxoo'><span class='fa fa-times-circle delt' style='display:none;' id='del5'></span><img src='' class='pic' alt='' /></div>
                            <div class=' xxoo'><span class='fa fa-times-circle delt' style='display:none;' id='del6'></span><img src='' class='pic' alt='' /></div>
                            <div class='well well-lg col-lg-2 div1' style='margin:0px 5px;' >
                                <div class="div2">+</div>
                                    <input class='inputstyle' name="files[]" multiple accept="image/*" type="file"/>
                                    <input type="hidden" name='gid' class='shopgid' value=''>
                                    {{csrf_field()}}
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
            <!-- 预览模块 -->
            <div id="morris-line-chart">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <b>图片预览：</b>
                        </div>
                        <div class="panel-body yuadd">
                            
                        </div>
                    </div>
                </div>
            </div>
            <!-- 预览end -->
        </div>
    </div>
    <!-- js -->
	<script type="text/javascript">
	//删除的单击事件
	// alert($);
	$('.delete_btn').click(function()
	{
        if(!confirm('是否确认删除')){
            return;
        }
        //设置文档头
		$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
		});
		var id = $(this).parents('tr').find('.id').html();
		// console.log(id);
		var btn = $(this);
		//ajax操作
		$.post("{{asset('/admin/goods/del')}}",{id:id},function(data){
			if(data == 1){
				//正确
				alert('删除成功');
				btn.parents('tr').remove();
			}else{
				//错误
				alert('删除失败');
			}
		})
	})
    //上架的单击事件
    $('.status_btn').click(function()
    {
        //设置文档头
        $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        });
        var id = $(this).parents('tr').find('.id').html();
        // console.log(id);
        //获取当前对象
        var btn = $(this);
        //ajax操作
           $.post("{{asset('/admin/goods/putaway')}}",{id:id},function(data){
            if(data == 1){
                //正确
                if(btn.text() == '上架'){
                    btn.parents('tr').find('#stat').html('上架');
                    btn.html('下架');
                }else{
                    btn.parents('tr').find('#stat').html('下架');
                    btn.html('上架');
                }
                }else{
                    //错误
                    alert('该产品不可上架');
                }
            })
        
    })
    //商品详情的单击事件
    $('.detail_btn').click(function(){
        //设置文档头
        $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        });
        //显示详情页面
        $('#cover').attr('class','c1');
        $('.detail').css({display:'block',position:'absolute',top:'140px',left:'280px',});
        var id=$(this).parents('tr').find('.id').html();
        //请求数据
        $.post("{{asset('/admin/goods/shuju')}}",{id:id},function(data){
            if(data){
                //正确
                eval('var obj='+data);
                $('.miaoshu').html(obj.gdesc);
                $('.zhutu').attr('src',obj.gpic);
                $('.form1').val(obj.gname);
                $('.form2').val(obj.dcont);
                $('.form3').val(obj.gbrand);
                $('.form4').val(obj.zkprice);
                $('.form5').val(obj.gaddr);
                $('.form6').val(obj.gsex);
                $('.form7').val(obj.gseason);
                $('.form8').val(obj.gage);
                $('.form9').val(obj.gid);
                for (var i = 0; i <  obj.mpic.length; i++) {
                     $('.xxoo').eq(i).find('img').attr('src',obj.mpic[i].mpic);
                     $('.xxoo').eq(i).find('img').attr('title',obj.mpic[i].color);
                     $('.xxoo').eq(i).css('display','block');
                };
                //商品评论id获取
                var href = $('.form9').val();
                $('.pinglun').attr('href','/admin/comment/index?id='+href);
                //判断如果有图片大于4张   隐藏添加
                if(obj.mpic.length>=4){
                    $('.inputstyle').css('display','none');
                    $('.div1').css('display','none');
                }
            }
        })
        //商品详情修改
        $('.btn-updates').click(function(){
            var gname = $('.form1').val();
            var price = $('.form2').val();
            var gbrand = $('.form3').val();
            var zkprice = $('.form4').val();
            var gaddr = $('.form5').val();
            var gsex = $('.form6').val();
            var gseason = $('.form7').val();
            var gage = $('.form8').val();
            var gid = $('.form9').val();
            $.post("{{asset('/admin/goods/updades')}}",{gname:gname,price:price,gbrand:gbrand,zkprice:zkprice,gaddr:gaddr,gsex:gsex,gseason:gseason,gage:gage,gid:gid,},function(data){
                if(data==01 || data==11 || data==10){
                    alert('修改成功');
                }else{
                    //刷新
                    alert('修改失败');
                    // location.reload();
                }
            })
            return false;
        });
         //商品详情图片添加事件
        $('.inputstyle').change(function(){
        //表单事件 
        //获取gid 表单提交 存储图片
        var gid = $('.form9').val();
        //设置隐藏input给予商品的id
        $('.shopgid').val(gid);
            //图片预览
            //删除上一次预览的图片
            if($('.yulan').eq(0).attr('src')){
                $('.yulan').remove();
            }
            for (var i = 0; i <  this.files.length; i++) {
                var imgs = $("<img class='yulan' src='' width='144px' height='200px' alt='' />");
                imgs.css({float:'left',margin:'10px 0px'});
                $('.yuadd').prepend(imgs);
                var objUrl = getObjectURL(this.files[i]) ; //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                 imgs.attr("src", objUrl) ; //将图片路径存入src中，显示出图片

                }
            };
            
            //建立一個可存取到該file的url
                function getObjectURL(file) {
                var url = null ;
                if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
                }
                return url ;
                }
        });
        //循环
        for (var i = 0; i <  $('.delt').length; i++) {
            //移入事件
            $('.xxoo').eq(i).mouseover(function(){
                $(this).find('span').css('display','block');
            });
           
            //移出事件
            $('.xxoo').eq(i).mouseout(function(){
                $(this).find('span').css('display','none');
            });
            $('.xxoo').eq(3).mouse;
            //删除单击事件
            $('#del'+i).unbind('click').click(function(){
                //获取src
                var src = $(this).next().attr('src');
                var img = $(this).next();
                $.post("{{asset('/admin/goods/delimg')}}",{src:src},function(data){
                    if(data==1){
                        //删除样式
                        img.parent().css('display','none');
                        img.attr('src','');
                        //显示添加图片框
                        //获取有src的个数
                        var sm = 0;
                        for (var m=0;m<$('.delt').length;m++){
                            if($('#del'+m).next().attr('src')){sm = sm+1;}        
                        };
                        if(sm<4){
                        $('.inputstyle').css('display','block');
                        $('.div1').css('display','block');
                        }
                        alert('删除成功');
                    }else{
                        alert('删除失败');
                    }
                })
            });
        };
        
    });
    //商品颜色单击事件
    $('.colors').find("input[type=checkbox]").each(function(){
        var i = $(this).index();
        console.log(i);
        // console.log($(this).attr('checked'));
        // $(this).attr('checked',true);
        $(this).click(function(){
            // console.log($(this).attr('checked'));
            if($(this).is(':checked')){
                $(this).attr('class','coloradd');
            }else{
                $(this).attr('class','');
            }
        })
    });
    //退出商品详情单击事件
    $('#dele').click(function(){
        $('#cover').removeClass('c1');
        $('.detail').css({display:'none'});
        $('.xxoo').css('display','none');
        $('.pic').attr('src','');
        $('.inputstyle').css('display','block');
        $('.div1').css('display','block');
        $('.colors').find("input[type=checkbox]").attr('checked',false);
    });
   
	</script>
@endsection